<template>
    <div>
        <div class="search">
            <input 
            class="search-input" 
            type="text" 
            placeholder="请输入城市名或拼音" 
            onfocus="if (placeholder =='请输入城市名或拼音'){placeholder =''}" onblur="if (this.keyword !==''){placeholder='请输入城市名或拼音',keyword=''}"
            v-model="keyword"
            >
        </div>
        <div class="search-content" 
            ref="search"
            v-show="keyword"
            >
            <ul>
                <li 
                class="search-item"
                v-for="item in list" 
                :key="item.id"
                @click="clickCity(item.name)"
                >{{item.name}}
                </li>
                <li class="search-item"
                    v-show="hasNodata"
                >没有找到匹配项</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { clearTimeout, setTimeout } from 'timers';
import Bscroll from 'better-scroll'
export default {
    name :'search' ,
    data() {
        return {
            keyword:'',
            timer:null,
            list:[],
        }
    },
    methods:{
        clickCity(city){
            this.$store.commit('changeCity',city)
            //组件使用dispatch触发一个叫changeCity的actions，并传递参数city，actions在Store中定义
            this.keyword = ''
            this.$router.push('/')
            //点击后跳转到首页
        }
    },
    computed:{
        hasNodata (){
            return !this.list.length
        }
    },
    props:{
        cities:Object
    },
    watch: {
        keyword(){
            if (this.timer) {
                clearTimeout(this.timer)
            }
            if (!this.keyword) {
                this.list = []
                return
            }
            this.timer = setTimeout(() => {
                const result = []
                for(let i in this.cities) {
                    this.cities[i].forEach((v) => {
                        if (v.spell.indexOf(this.keyword ) > -1
                        || v.name.indexOf(this.keyword) > -1) {
                            result.push(v)    
                        }
                    });
                }
                this.list = result
            },100)
        }
        
    },
    mounted() {
        this.scroll = new Bscroll(this.$refs.search)
    },
}
</script>

<style lang="stylus" scoped>
input, button, select, textarea {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
ul,li{
    list-style none 
    padding 0
    margin 0
}
.search
    height 2.4rem
    padding .1rem .4rem
    background-color #00bcd4
    .search-input
        width 100%
        height 2rem
        line-height 2rem
        text-align center
        border-radius .2rem
        font-size 13px
        outline none 
        border none 
        touch-action: none
        color #ccc
    
.search-content
    overflow hidden
    position absolute
    top 5.2rem
    left 0
    right 0
    bottom 0
    background-color #eee
    z-index 1
    .search-item
        line-height 2.4rem
        padding-left .8rem
        color #666
        background #fff
        border-bottom 1px solid #eee
        font-size 14px
</style>
